<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>爱打印-iprint</title>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/css/style.css}">
<style type="text/css">
	.footer{ text-align: center; line-height:44px; z-index:999;}
</style>
</head>
	<body>
		<!-- 菜单导航 -->
		<div th:insert="~{front/head :: header}"></div>
		<!--滚动条-->
		<div class="layui-carousel layui-hide-xs" id="test1">
			<div carousel-item>
				<div class="layui-bg-gray">
					<img th:src="@{/img/banner1.png}" />
				</div>
				<div class="layui-bg-gray">
					<img th:src="@{/img/banner1.png}" />
				</div>
				<div class="layui-bg-gray">
					<img th:src="@{/img/banner1.png}" />
				</div>
			</div>
		</div>
		<!-- 主体 -->
		<div class="layui-container">
			<!--打印类型-->
			<div class="layui-row ip-row">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>印品类型</legend>
				</fieldset>
				<!--文档-->
				<div class="layui-col-md3" style="height: 240px;">
					<a  th:href="@{/items/document}">
						<fieldset class="layui-elem-field" style="height: 230px;">
							<legend>
								<span class="layui-badge-dot layui-bg-orange"></span>
							</legend>
							<div class="layui-field-box">
								<div class="layui-row">
									<div class="layui-col-md-offset4 layui-col-xs-offset4">
										<i class="layui-icon layui-center" style="font-size: 100px; color: #1E9FFF;">&#xe60a;</i>
									</div>
								</div>
								<div class="layui-row">
									<p style="text-align: center;">文档</p>
								</div>
								<div class="layui-row">
									<p style="text-align: center;">讲义/课件/论文/简历/学习资料</p>
								</div>
							</div>
						</fieldset>
					</a>
				</div>
				<!--照片-->
				<div class="layui-col-md3" style="height: 240px;">
					<a  th:href="@{/items/photo}">
						<fieldset class="layui-elem-field" style="height: 230px;">
							<legend>
								<span class="layui-badge-dot layui-bg-orange"></span>
								<span class="layui-badge-dot layui-bg-orange"></span>
							</legend>
							<div class="layui-field-box">
								<div class="layui-row">
									<div class="layui-col-md-offset4">
										<i class="layui-icon layui-center" style="font-size: 100px; color: #1E9FFF;">&#xe64a;</i>
									</div>
								</div>
								<div class="layui-row">
									<p style="text-align: center;">照片</p>
								</div>
								<div class="layui-row">
									<p style="text-align: center;">毕业照/生活照/手机照/纪念照/</p>
								</div>
							</div>
						</fieldset>
					</a>
				</div>
				<!--证件照-->
				<div class="layui-col-md3" style="height: 240px;">
					<a  th:href="@{/items/idphoto}">
						<fieldset class="layui-elem-field" style="height: 230px;">
							<legend>
								<span class="layui-badge-dot layui-bg-orange"></span>
								<span class="layui-badge-dot layui-bg-orange"></span>
								<span class="layui-badge-dot layui-bg-orange"></span>
							</legend>
							<div class="layui-field-box">
								<div class="layui-row">
									<div class="layui-col-md-offset3">
										<i class="layui-icon layui-center" style="font-size: 100px; color: #1E9FFF;">&#xe613;</i>
									</div>
								</div>
								<div class="layui-row">
									<p style="text-align: center;">证件照</p>
								</div>
								<div class="layui-row">
									<p style="text-align: center;">1寸/2存/身份证/驾照/其他</p>
								</div>
							</div>
						</fieldset>
					</a>
				</div>
				<!--单页-->
				<div class="layui-col-md3" style="height: 240px;">
					<a  th:href="@{/items/leaflet}">
						<fieldset class="layui-elem-field" style="height: 230px;">
							<legend>
								<span class="layui-badge-dot layui-bg-orange"></span>
								<span class="layui-badge-dot layui-bg-orange"></span>
								<span class="layui-badge-dot layui-bg-orange"></span>
								<span class="layui-badge-dot layui-bg-orange"></span>
							</legend>
							<div class="layui-field-box">
								<div class="layui-row">
									<div class="layui-col-md-offset4">
										<i class="layui-icon layui-center" style="font-size: 100px; color: #1E9FFF;">&#xe630;</i>
									</div>
								</div>
								<div class="layui-row">
									<p style="text-align: center;">单页</p>
								</div>
								<div class="layui-row">
									<p style="text-align: center;">A3/A4/商品促销/活动宣传/社团活动</p>
								</div>
							</div>
						</fieldset>
					</a>
				</div>
			</div>
			<!--流程-->
			<div class="layui-row ip-row">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>操作流程</legend>
				</fieldset>
				<div class="layui-col-lg12" style="width:100%;">
					<img th:src="@{/img/step_img.png}" style="width:100%;" />
				</div>
			</div>
			<!--新闻展示-->
			<div class="layui-row ip-row">
				<div class="layui-row">
					<blockquote class="layui-elem-quote">
						相关资讯
					</blockquote>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form">
						<table class="layui-table">
							<thead>
								<tr>
									<th>
										<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe607;</i> 常见问题
									</th>
								</tr>
							</thead>
							<tbody>
                            <tr th:each=" help : ${helpList}">
                                <td>
                                    <a th:href="@{/getHelp(id=${help.id})}" th:text="${help.title }"></a>
                                </td>
                            </tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="layui-form">
						<table class="layui-table">
							<thead>
								<tr>
									<th>
										<i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">&#xe756;</i> 最新动态
									</th>
								</tr>
							</thead>
							<tbody>
                                <tr th:each="ads : ${adsList}">
                                    <td>
                                        <a th:href="@{/getHelp(id=${ads.id})}" th:text="${ads.title }"></a>
                                    </td>
                                </tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<div class="layui-row ip-row">
				<div class="fly-footer">
					<p>
						<a href="http://wohaolihai.com/iprint" target="_blank">爱打印</a> 2018 &copy;
						<a href="http://wohaolihai.com" target="_blank">wohaolihai.com 出品</a>
					</p>
					<p>
						<a href="#" target="_blank">网站信息</a>
						<a href="#" target="_blank">站长统计</a>
						<a href="http://wohaolihai.com" target="_blank">联系我</a>
					</p>
				</div>
			</div>
		</div>

		<!-- 条目中可以是任意内容，如：<img src=""> -->
		<script th:src="@{/layui/layui.js}"></script>
		<script>
			/*轮播图*/
			layui.use('carousel', function() {
				var carousel = layui.carousel;
				//建造实例
				carousel.render({
					elem: '#test1',
					width: '100%' //设置容器宽度
						,
					arrow: 'always' //始终显示箭头
					//,anim: 'updown' //切换动画方式
				});
			});
			/*导航栏效果*/
			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
				//监听导航点击
				element.on('nav(demo)', function(elem) {
					layer.msg(elem.text());
				});
			});

			function login() {
				layui.use('layer', function() {
					var layer = layui.layer;
					layer.open({
						type: 2,
						area: ['500px', '450px'],
						skin: 'layui-layer-lan',
						content: 'login.html',
						title: '登陆'
					});
				});
			}

			function register() {
				layui.use('layer', function() {
					var layer = layui.layer;
					layer.open({
						type: 2,
						area: ['500px', '600px'],
						skin: 'layui-layer-lan',
						content: 'register.html',
						title: '注册'
					});
				});
			}
		</script>

	</body>

</html>